//  创建整个应用路由器
import vueRouter from "vue-router";
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import News from "@/pages/News.vue";
import Messages from "@/pages/Message.vue";
import Details from "@/pages/Detail.vue";

const router = new vueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
            meta:{isAuth:true,title:"关于"}
        },
        {
            name: "zhuye",
            path: '/home',
            component: Home,
            meta:{title:"主页"},
            children: [
                {
                    name:'xinwen',
                    path: 'news',
                    component: News,
                    meta:{isAuth:true, title:"主页"},
                    // 独享路由守卫
                    // beforeEnter:(to, from, next)=>{
                    //     if (to.meta.isAuth) {//判断一下是否需要鉴权
                    //         if (localStorage.getItem("school") === 'atguigu') {
                    //             next()
                    //         } else {
                    //             alert('学校名不对')
                    //         }
                    //     } else {
                    //         next()
                    //     }
                    // }
                },
                {
                    name: "xiaoxi",
                    path: 'messages',
                    component: Messages,
                    meta:{isAuth:true, title:"消息"},
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:title',//占位符声明接收params参数
                            component: Details,
                            meta:{isAuth:true, title:"详情"},
                            //props第一种写法 值为对象,该对象中的key-val会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}
                            //props第二种写法 值为bool值，若为真，会把路由组件接收到的params参数，传给Detail组件
                            // props:true
                            //props第三种写法 值为函数  {params:{id,title}}解构赋值
                            // props:function ({params:{id,title}}){
                            //     //相同简写方式
                            //     return {id,title}
                            //     //正常写法
                            //     // return {id:id,title:title}
                            // }
                            //正常写法
                            props: function ($route) {
                                return {id: $route.params.id, title: $route.params.title}
                            }
                        }
                    ]
                },

            ]
        },

    ]

})
//全局前置路由守卫 ---初始化时候被调用、每次路由切换之前
// router.beforeEach((to, from, next) => {
//     // console.log(to, from)
//     if (to.meta.isAuth) {//判断一下是否需要鉴权
//         if (localStorage.getItem("school") === 'atguigu') {
//             next()
//         } else {
//             alert('学校名不对')
//         }
//     } else {
//         next()
//     }
//
//
// })
//全局后置路由守卫 ---初始化时候被调用、每次路由切换之后
// router.afterEach((to,from)=>{
//     console.log(to,from)
//     document.title = to.meta.title || '硅谷系统'
// })

export default router


